<template>
  <div class='tabs'>
    <span v-for="(item,index) in tabData" :key="index" :class="{'is-active':searchInfo.sort==index+1}" @click="setSort(index)">{{item}}</span>
  </div>
</template>
<script>
export default {
  props:["searchInfo","pageInfo","getListData"],
  components: {},
  name: "",
  data() {
    return {
      tabData:['理论工作量','实验工作量','实践工作量','补贴工作量','奖励学时表'],
      active:"1",//是否重复点击
    };
  },
  methods: {
    setSort(index){
      this.$set(this.searchInfo,'sort',index+1)
      this.$store.state.tabActive=index+1
      if(this.active!=this.searchInfo.sort){
        this.getSearch()
        this.active=this.searchInfo.sort
      }
    },
    getSearch(){
     this.pageInfo.page=1
     this.getListData()
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  padding: 15px 20px;
  color: #666;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #e2e2e2;

  span{
    display: inline-block;
    font-size: 12px;
    line-height: 50px;
    height: 50px;
    box-sizing: border-box;
  }
  span.is-active{
    color: #00998d;
    border-bottom: 2px solid #00998d;
  }
}
</style>